/*
* Created by: yyf
* Description: 拟投资项目、拟设立基金 --编辑节点
*/
<template>
    <div class="ca-box ca-p-t-10 ca-p-l-20 ca-p-r-20 ca-m-t-20 ca-node-self">
        <el-row v-if="!isEdit">
            <el-col class="pull-right ca-align-right">
                <el-button type="text" class="ca-edit-btn el-icon-edit" @click="changeNodeEdit(true)" :disabled="!isAuthEdit">编辑</el-button>
            </el-col>
        </el-row>
        <el-row v-if="isEdit">
            <el-col class="ca-align-right ca-m-b-10">
                <el-button type="primary" size="medium" @click="save()">保存</el-button>
                <el-button size="medium" @click="cancel">取消</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-if="isAuthSee">
            <el-col :span="20">
                <div class="ca-title">
                    <h3><slot>{{this.dataType === 1 ? '项目节点：' : '基金节点：'}}</slot></h3>
                    <div class="ca-node ca-pull-left">
                        <em>未开始</em><span class="project-node--no-complete"></span>
                        <em>进行中</em><span class="project-node--conduct"></span>
                        <em>已完成</em><span class="project-node--completed"></span>
                        <em>不通过</em><span class="project-node--not-passed"></span>
                        <em>暂停</em><span class="project-node--suspend"></span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!--节点详情-->
        <div class="ca-node-box ca-m-b-20" v-if="!isEdit">
            <ul id="nodeBox" class="clearfix">
                <li v-for="(item, index) in nodeParam" :key="index">
                    <div class="ca-node-text">
                        <span>{{item.nodeDate ? $moment(item.nodeDate).format('YYYY-MM-DD') : ''}}</span>
                    </div>
                    <el-tooltip placement="top" effect="dark">
                        <div slot="content">
                            <div class="ca-node-details">
                                <div>时间：{{item.nodeDate ? $moment(item.nodeDate).format('YYYY-MM-DD') : ''}}</div>
                                <div class="wordBreak">备注：{{item.remark}}</div>
                            </div>
                        </div>
                        <a>
                            <div class="ca-node-state cursor" :class="getNodeColor(item.nodeStatus)"></div>
                        </a>
                    </el-tooltip>
                    <!--<div v-else class="ca-node-state cursor" :class="getNodeColor(item.nodeStatus)"></div>-->
                    <div class="ca-node-text ca-node-color-666">{{item.name}}</div>
                    <div class="ca-node-line"></div>
                </li>
            </ul>
        </div>
        <!--编辑节点-->
        <csNodeEdit
            :nodeParam="nodeParam"
            v-if="isEdit">
        </csNodeEdit>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '__service/api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { addRemind } from '__service/utils';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                isEdit: false,
                itemId: '',
                arrNodeClass: {
                    '0': 'project-node--no-complete',
                    '1': 'project-node--conduct',
                    '2': 'project-node--completed',
                    '3': 'project-node--not-passed',
                    '4': 'project-node--suspend'
                },
                nodeParam: [],
                isAuthEdit: null,  // 编辑权限
                isAuthSee: null, // 查看权限
            }
        },
        watch: {},
        props: {
            value: {
                type: Array,
                default() {
                    return []
                }
            },
            dataType: {
                type: Number,
                default() {
                    return 4;
                }
            }
        },
        mounted() {
            this.itemId = this.$route.params.itemId;
            this.getNodeList();
            if (this.dataType === 4) { // 拟投资基金
                this.isAuthSee = isNoAuth('拟投资基金-基金详情-查看');
                this.isAuthEdit = isNoAuth('拟投资基金-基金详情-编辑');
            } else if (this.dataType === 1) {  // 拟投资项目
                this.isAuthSee = isNoAuth('拟投资项目-项目详情-查看');
                this.isAuthEdit = isNoAuth('拟投资项目-项目详情-编辑');
            }
        },
        methods: {
            // 切换编辑和详情
            changeNodeEdit(state) {
                this.isEdit = state;
            },
            // 获取节点样式
            getNodeColor(data) {
                return this.arrNodeClass[String(data)];
            },
            // 获取节点数据
            async getNodeList() {
                this.nodeParam = [];
                let {resCode, data} = await apiHttp(api.NODE_LIST, {dataId: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    if (data.length === 0) {//空数组--新添加
                        this.value.map((item)=> {
                            this.nodeParam.push({
                                dataId: this.itemId,
                                nodeDate: '',
                                nodeStatus: 0,
                                id: '',
                                nodeValue: item.id,
                                name: item.name,
                                remark: '',
                                userEntityList: []
                            })
                        })
                    } else {
                        data.sort((a, b)=>{
                            return a.nodeValue - b.nodeValue;
                        })
                        this.nodeParam = data;
                        this.nodeParam.map((nodeItem, nodeIndex)=>{
                            nodeItem.nodeDate = nodeItem.nodeDate ? this.$moment( nodeItem.nodeDate ).format('YYYY-MM-DD') : '';
                            nodeItem.name = this.value[nodeIndex].name;
                        })
                    }
                }
            },
            // 保存节点
            async save() {
                this.nodeParam.map(item=>{
                    delete item.dataId;
                    delete item.name;
                })
                let nodeParam = {
                    dataId: this.itemId,//基金或项目id
                    nodeDTOList: this.nodeParam,
                }
                let {resCode} = await apiHttp(api.SAVE_NODE, nodeParam);
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.$message({
                        type: 'success',
                        message: '保存成功！',
                        center: true
                    })
                    // 添加小红点
                    await addRemind({
                        dataId: this.$route.params.itemId, // 业务id
                        dataTab: 0, // tab页顺序 head 也为0 新建为'-1'
                        dataType: this.dataType, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                    });
                    // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                    this.$root.Dot.$emit('getDotList');
                    // 添加小红点 end
                    this.isEdit = false;
                    this.getNodeList();
                }
            },
            // 取消
            cancel() {
                this.changeNodeEdit(false);
                this.getNodeList();
            }
        },
        components: {
            csNodeEdit: require('./edit'), // 项目节点 编辑
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .wordBreak {
        word-break: break-all;
    }
</style>
